<template>
  <div class="cate-container">
    <el-card>
      <div class="cate-header">
        <Bread second="文章分类"></Bread>
        <el-button type="primary" @click="addCate">添加分类</el-button>
      </div>
      <!-- 表格部分 -->
      <el-table
        :data="artList"
        height="250"
        border
        style="width: 100%; margin: 20px 0"
      >
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="cate_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"> </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini">修改</el-button>
          <el-button type="danger" size="mini">删除</el-button></el-table-column
        >
      </el-table>
    </el-card>

    <!-- 添加分类 -->
    <el-dialog
      width="40%"
      title="添加文章分类"
      :visible.sync="dialogFormVisible"
      @close="close"
    >
      <el-form :model="form" :rules="rulesForm" ref="addCateForm">
        <el-form-item prop="cate_name" label="分类名称" label-width="90px">
          <el-input v-model="form.cate_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias" label-width="90px">
          <el-input v-model="form.cate_alias" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入辅助函数  得到仓库中的数据
import { mapActions, mapState } from 'vuex'
// 导入封装的请求添加分类的函数模块
import { addCateApi } from '../../api/art'
export default {
  name: '',
  data () {
    return {
      dialogFormVisible: false,
      form: {
        cate_name: '',
        cate_alias: ''
      },
      // 添加的表单验证
      rulesForm: {
        cate_name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          },
          {
            pattern: /^\S{1,10}$/,
            message: '分类名称必须是1-10位的非空字符串',
            trigger: 'blur'
          }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '分类别名必须是1-15位的字母数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    // 使用组件中的函数
    this.AgetArtList()
  },
  computed: {
    ...mapState('article', ['artList'])
  },
  methods: {
    // 利用辅助函数 使得可以使用组件中actions中的函数
    ...mapActions('article', ['AgetArtList']),

    addCate () {
      // 点击添加分类 使弹出层出现
      this.dialogFormVisible = true
    },
    // 重置表单 利用自带的close事件 $refs获取表单
    close () {
      this.$refs.addCateForm.resetFields()
    },
    // 点击确认,调用接口添加数据到后天,渲染到页面后关闭弹出层
    addList () {
      // 预校验成功时 发送请求  (导入封装的请求函数)
      this.$refs.addCateForm.validate(async (valid) => {
        if (valid) {
          // 使用封装的函数,函数返回值 是promise实例 需要用await和async修饰
          const { data } = await addCateApi(this.form)
          // console.log(data)
          if (data.code === 0) {
            this.$message({
              message: '恭喜你，添加分类成功',
              type: 'success'
            })
          }
          // 渲染页面,调用调用模块中的actions方法触发数组改变
          this.AgetArtList()
          // 最后 关闭弹出层
          this.dialogFormVisible = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.cate-container {
  .cate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
